import './public/index'
import './public/toastr'
import server from './date/url'
import {
  userName        as validate_loginName,
  pwd             as validate_pwd,
  confirmPwd      as validate_confirmPwd,
  mobile          as validate_mobile,
  identifyCode    as validate_identifyCode
} from './public/validate'

let app = new Vue({
  el: '#sign-form',
  data: () => { // 设置成函数才可以调用$options.data()方法来清空数据
    return {
      loginName    : '',
      pwd          : '',
      confirmPwd   : '',
      email        : '',
      mobile       : '',
      identifyCode : '',
      isMobileValid: false,
      isRequestValidLimit: false,
      isRequestTime: 60
    }
  },
  watch: {
    mobile(curVal, oldVal) {
      if (/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(curVal)) {
        this.isMobileValid = true
      }
    }
  },
  mounted: () => { // 生命周期
    vue_mounted_valid()
  },
  methods: {
    getValidCode: function(e) {
      e.preventDefault()

      let that = this
      
      if (!this.isMobileValid) {
        return
      }
      
      // 如果当前在倒计时内则不操作
      if (this.isRequestValidLimit) {
        return
      }
      
      let loading = layer.msg('获取验证码中', {
                      icon: 16,
                      shade: .6,
                      time: 0
                    })
      
      $.ajax({
        url:server,
        type: 'post',
        data: {
          task: 'getStep2ValidCode',
          stamp: new Date().getTime(),
          data: {
            phone: that.mobile
          }
        }
      })
      .done(function(res) {
        console.log("success")
        console.log(res)

        if (res.status === 'true' || res.status === true) {
          layer.msg('验证码发送成功')
          that.isRequestValidLimit = true
          that.countdown()
        } else {
          toastr.error(res.message || '')
        }

      })
      .fail(function(res) {
        console.log("error")
        console.log(res)
      })
      .always(function() {
        // console.log("complete")
        layer.close(loading)
      })
      

    },
    countdown: function() {
      let that = this

      let timer = setInterval(function() {

        if (that.isRequestTime <= 0) {
          that.isRequestValidLimit = false
          that.isRequestTime = 60
          clearInterval(timer)
        }

        that.isRequestTime -= 1

      }, 1000)
    }
  }
})
function vue_mounted_valid () {
  let form_valid,
      form = $('#sign-form')

  $.validator.setDefaults({ // 只能放在validate规则配置之前

    // 提交事件
    submitHandler: () => {
      console.log('submit!')

      let loading = layer.msg('提交表单中...', {
                      icon: 16,
                      shade: .6,
                      time: 0
                    })

      $.ajax({
        url:server,
        type: 'post',
        data: {
          task: 'inputRegStep2Form',
          stamp: new Date().getTime(),
          data: {
            user: app.loginName,
            password: app.pwd,
            repassword: app.confirmPwd,
            email: app.email,
            phone: app.mobile,
            valid: app.identifyCode,
          }
        }
      })
      .done(function(res) {
        console.log("success")
        console.log(res)

        if (res.status === 'true' || res.status === true) {
          console.log('成功')
          window.location.href = './signOver.html'
        } else {
          toastr.error(res.message || '')
        }

      })
      .fail(function(res) {
        console.log("error")
        console.log(res)
      })
      .always(function() {
        // console.log("complete")
        layer.close(loading)
      })

    }
  })

  // 验证
  form_valid = form.validate({
    rules: {
      loginName   : validate_loginName,
      pwd         : validate_pwd,
      confirmPwd  : validate_confirmPwd,
      email       : {
        email   : true
      },
      mobile      : validate_mobile,
      identifyCode: validate_identifyCode
    }
  })

}